<template>
	<div id="app">
		<!-- 		   <transition name="el-zoom-in-top">
					<div v-show="show2" class="transition-box">
		
			 </div>
 	     </transition>
	  <el-button style="margin-left: 90%;" type="primary" @click="show2 = !show2">返回</el-button> -->




		<el-tabs tab-position="left">
			<el-tab-pane label="基本信息">
				<div class="bgdiv">
					<el-card class="box-card box-carda">
						<div>
							<h4>基本信息</h4>
						</div>
						<hr>
						<br>
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item label="运输任务编号">
								<el-input disabled='true' v-model="driverjob.taskTransportId" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="车牌号码">
								<el-input disabled='true' v-model="driverjob.taskTransport.truck.licensePlate" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="调度机构" style="margin-left: 27px;">
								<el-input disabled='true' v-model="driverjob.startAgency.name" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;
							<el-form-item label="起始地">
								<el-input disabled='true' v-model="driverjob.startAgency.name" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="目的地" style="margin-left: 39px;">
								<el-input disabled='true' v-model="driverjob.endAgency.name" placeholder="审批人"></el-input>
							</el-form-item>
						</el-form>
					</el-card>
				</div>
			</el-tab-pane>

			<el-tab-pane label="任务轨迹">

				<div class="bgdiv">
					<el-card class="box-card box-carda">
						<div>
							<h4>任务轨迹</h4>
						</div>
						<hr>
						<br>
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="车牌号">
								<el-input disabled='true' v-model="driverjob.taskTransport.truck.licensePlate" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="司机">
								<el-input disabled='true' v-model="driverjob.taskTransportId" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="计划发车时间">
								<el-input disabled='true' v-model="driverjob.planDepartureTime" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;
							<el-form-item label="实际发车时间">
								<el-input disabled='true' v-model="driverjob.actualDepartureTime" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-form-item label="计划到达时间">
								<el-input disabled='true' v-model="driverjob.planArrivalTime" placeholder="审批人"></el-input>
							</el-form-item>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;
							<el-form-item label="实际到达时间">
								<el-input disabled='true' v-model="driverjob.actualArrivalTime" placeholder="审批人"></el-input>
							</el-form-item>
						</el-form>
						<br>
						<hr>
						<div>
							<h4>轨迹查看</h4>
						</div>
					</el-card>
				</div>

			</el-tab-pane>

			<el-tab-pane label="运单详情">

				<div class="bgdiv">
					<el-card class="box-card box-carda">
						<div>
							<h4>运单详情</h4>
						</div>
						<hr>
						<br>
						<el-table :data="transportOrders" border style="width: 100%">
							<el-table-column prop="id" label="序号" width="120">
							</el-table-column>
							<el-table-column prop="orderId" label="运单编号" width="200">
							</el-table-column>
							<el-table-column prop="order.createTime" label="下单时间" width="200">
							</el-table-column>
							<el-table-column prop="order.senderName" label="发件人姓名" width="140">
							</el-table-column>
							<el-table-column prop="order.senderPhone" label="发件人电话" width="180">
							</el-table-column>
							<el-table-column  label="发件人地址" width="180">
								<template scope="scope">
									{{scope.row.order.senderProvinceId+
									scope.row.order.senderCityId+
									scope.row.order.senderCountyId+
									scope.row.order.senderAddress}}
								</template>
							</el-table-column>
							<el-table-column label="货品数量" width="120">
							<template scope="scope">
								{{scope.row.order.orderCargoList.length}}
							</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="200">
								<template scope="scope">
									<a href="javascript:;" type="primary" @click="showdetail(scope.row)">查看详情</a>
								</template>
							</el-table-column>
							</el-table-column>
						</el-table>
					</el-card>
				</div>

			</el-tab-pane>

			<el-tab-pane label="交付照片">
				<div class="bgdiv">
					<el-card class="box-card">
						<div>
							<h4>交付货品照片</h4>
						</div>
						<hr>
						<br>
						<el-image>
							111
						</el-image>
						<br>
						<br>
						<div>
							<h4>支付回单照片</h4>
						</div>
						<hr>
						<br>
						<el-image>
							111
						</el-image>
					</el-card>
				</div>
			</el-tab-pane>

			<el-tab-pane label="提货照片">

				<div class="bgdiv">
					<el-card class="box-card">
						<div>
							<h4>提货货品照片</h4>
						</div>
						<hr>
						<br>
						<el-image>
							111
						</el-image>
						<br>
						<br>
						<div>
							<h4>提货凭证照片</h4>
						</div>
						<hr>
						<br>
						<el-image>
							111
						</el-image>

					</el-card>
				</div>

			</el-tab-pane>

		</el-tabs>

		<div>
			<el-button @click="back()">返回</el-button>
		</div>

		<el-dialog center="true" :visible.sync="detail_show" fullscreen='true' width="80%" height="80%"
			style="background-color: grey;">
			<div class="text-left">
				<el-card class="box-card">
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<label>订单编号：</label> <i>{{Taskportorder.orderId}}</i>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<label>运单编号：</label> <i>{{Taskportorder.id}}</i>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<label>下单时间：</label> <i>{{order.createTime}}</i>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<label>订单状态：</label> <i>{{order.status}}</i>
							</div>
						</el-col>
					</el-row>
					<br />
					<el-row :gutter="20">
						<el-col :span="6">
							<div class="grid-content bg-purple">
								<label>预计到达日期：</label> <i>{{order.estimatedArrivalTime}}</i>
							</div>
						</el-col>
					</el-row>
				</el-card>
				<br />
				<el-collapse v-model="activeName" accordion>
					<el-collapse-item title="基本信息" name="1">
						<template slot="title">
							<b style="">基本信息</b>
						</template>
						<el-card class="box-card" shadow="never">
							<div>
								<b>收货方</b>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label>收货方姓名：</label> <i>{{order.receiverName}}</i>
									</el-col>
									<el-col :span="6">
										<label>收货方地址：</label> <i>
									{{order.receiverProvinceId+
									order.receiverCityId+
									order.receiverCountyId}}
									</i>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="6">
										<label>收货方电话：</label> <i>{{order.receiverPhone}}</i>
									</el-col>
									<el-col :span="6">
										<label>详细地址：</label> <i>{{order.receiverAddress}}</i>
									</el-col>
								</el-row>
			  		</div>

							<div class="mt-2">
								<b>发货方</b>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label>发货方姓名：</label> <i>{{order.senderName}}</i>
									</el-col>
									<el-col :span="6">
										<label>发货方地址：</label> <i>
									{{order.senderProvinceId+
									order.senderCityId+
									order.senderCountyId}}</i>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="6">
										<label>发货方电话：</label> <i>{{order.senderPhone}}</i>
									</el-col>
									<el-col :span="6">
										<label>详细地址：</label> <i>{{order.senderAddress}}</i>
									</el-col>
								</el-row>
							</div>
							<div class="mt-2">
								<label> <b>距离：</b> </label> <i>{{order.distance}}</i>
								<label class="ml-5"><b>地图：</b></label>
								<el-link @click="$router.push('/index/order/map')" type="primary" :underline="false">
									查看地图</el-link>
							</div>
						</el-card>
					</el-collapse-item>
				</el-collapse>

				<el-collapse class="mt-3" v-model="activeName" accordion>
					<el-collapse-item name="1">
						<template slot="title">
							<b style="">费用信息</b>
						</template>
						<el-card class="box-card" shadow="never">
							<div>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="8">
										<label>运费：</label>
										<i style="color: #ffb302; font-size: 20px">{{order.amount}}</i>&emsp;元
									</el-col>
									<el-col :span="8"> <label>支付方式：</label> <i>{{order.paymentMethod==1?"预付":"到付"}}</i> </el-col>
									<el-col :span="8"> <label>付款状态：</label> <i>{{order.paymentStatus==1?"未付":"已付"}}</i> </el-col>
								</el-row>
							</div>
						</el-card>
					</el-collapse-item>
				</el-collapse>

				<el-collapse class="mt-3" v-model="activeName" accordion>
					<el-collapse-item name="1">
						<template slot="title">
							<b style="">货品信息</b>
						</template>
						<el-card class="box-card" shadow="never">
							<div>
			  			<el-table :data="orderCargos" stripe style="width: 100%">
									<el-table-column prop="id" label="序号" width="120">
									</el-table-column>
									<el-table-column prop="name" label="货品名称" width="180">
									</el-table-column>
									<el-table-column prop="unit" label="货品单位"> </el-table-column>
									<el-table-column prop="goodsTypeId" label="货品类型" width="140">
									</el-table-column>
									<el-table-column prop="weight" label="重量(千克)" width="140">
									</el-table-column>
									<el-table-column prop="volume" label="体积(方)" width="140">
									</el-table-column>
									<el-table-column prop="cargoValue" label="货值(元)" width="140">
									</el-table-column>
									<el-table-column prop="cargoBarcode" label="条形编码" width="180">
									</el-table-column>
									<el-table-column prop="remark" label="备注" width="180">
									</el-table-column>

								</el-table>
							</div>
						</el-card>
					</el-collapse-item>
				</el-collapse>

				<el-collapse class="mt-3" v-model="activeName" accordion>
					<el-collapse-item name="1">
						<template slot="title">
							<b style="">取件信息</b>
						</template>
						<el-card class="box-card" shadow="never">
							<div>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label>所在网点：</label> <i>{{order.pickUp.agency.name}}</i>
									</el-col>
									<el-col :span="6">
										<label>取件类型：</label> <i>{{order.pickupType==1?"网点自寄":"上门取件"}}</i>
									</el-col>
									<el-col :span="6">
										<label>作业状态：</label>
										<!--     * 任务状态，
										1为待执行（对应 待上门和须交接）、
										2为进行中（该状态暂不使用，属于保留状态）、
										3为待确认（对应 待妥投和须交件）、
										4为已完成、5为已取消
										      */ -->
										<i v-if="order.pickUp.status==1">待执行</i>
										<i v-if="order.pickUp.status==2">进行中</i>
										<i v-if="order.pickUp.status==3">待确认</i>
										<i v-if="order.pickUp.status==4">已完成</i>
										<i v-if="order.pickUp.status==5">已取消</i>
									</el-col>
									<el-col :span="6">
										<label>取件快递员：</label> <i>{{order.pickUp.courier.name}}</i>
									</el-col>
								</el-row>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label>快递员电话：</label> <i>{{order.pickUp.courier.mobile}}</i>
									</el-col>
									<el-col :span="6">
										<label> 预计取件时间：</label> <i>{{order.estimatedArrivalTime}}</i>
									</el-col>
									<el-col :span="6">
										<label>取件完成时间：</label> <i>{{order.pickUp.actualEndTime}}</i>
									</el-col>
									<el-col :span="6">
										<label>实际取件时间：</label> <i>{{order.pickUp.confirmTime}}</i>
									</el-col>
								</el-row>
							</div>
						</el-card>
					</el-collapse-item>
				</el-collapse>
				
				<el-collapse v-if="order.dispatch!=null&order.dispatch.id!=''" class="mt-3" v-model="activeName" accordion>
					<el-collapse-item name="1">
						<template slot="title">
							<b style="">派件信息</b>
						</template>
						<el-card class="box-card" shadow="never">
							<div>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label>所在网点：</label> <i>{{order.dispatch.agency.name}}</i>
									</el-col>
									<el-col :span="6">
										<label>作业状态：</label>
										<!--     * 任务状态，
										1为待执行（对应 待上门和须交接）、
										2为进行中（该状态暂不使用，属于保留状态）、
										3为待确认（对应 待妥投和须交件）、
										4为已完成、5为已取消
										      */ -->
										<i v-if="order.dispatch.status==1">待执行</i>
										<i v-if="order.dispatch.status==2">进行中</i>
										<i v-if="order.dispatch.status==3">待确认</i>
										<i v-if="order.dispatch.status==4">已完成</i>
									</el-col>
									<el-col :span="6">
										<label>派件快递员：</label> <i v-if="order.dispatch.courier!=null">{{order.dispatch.courier.name}}</i>
									</el-col>
									<el-col :span="6">
										<label>快递员电话：</label> <i v-if="order.dispatch.courier!=null">{{order.dispatch.courier.mobile}}</i>
									</el-col>
								</el-row>
								<el-row :gutter="20" class="mt-2">
									<el-col :span="6">
										<label> 预计派送时间：</label> <i>{{order.dispatch.estimatedStartTime}}</i>
									</el-col>
									<el-col :span="6">
										<label>派件完成时间：</label> <i>{{order.dispatch.actualEndTime}}</i>
									</el-col>
								</el-row>
							</div>
						</el-card>
					</el-collapse-item>
				</el-collapse>

				<br />
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import "../../ali_icon/iconfont.js";
	export default {
		data: () => ({
			orderCargos:[],
			order:{
				pickUp:{
					agency:{
						
					},
					courier:{}
				},
				dispatch:{
					agency:{
						
					},
				},
				orderCargoList:[],
				
			},
			Taskportorder:{},
			transportOrders:[],
			driverjob: {},
			activeNames: ['1'],
			detail_show: false,
			showa: false,
			showb: false,
			formInline: {
				user: '',
				region: ''
			},
			tableData: [{
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}]
		}),
		watch: {
			'$route': 'gettingData'
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			showdetail(Taskportorder) {
				console.log(Taskportorder)
				this.Taskportorder=Taskportorder;
				this.order=Taskportorder.order;
				this.orderCargos=Taskportorder.order.orderCargoList
				this.detail_show = true;
			},
			showBasicInformation() {
				this.showa = !this.showa;
			},
			showFare() {
				this.showb = !this.showb;
			},
			gettingData() {
				var driverjob = this.$route.params.driverjob
				this.driverjob = driverjob
				driverjob.taskTransport
				this.transportOrders=driverjob.taskTransport.transportOrders
			}
		},	
		created() {
			console.log(111)
			this.gettingData();
			console.log(this.driverjob)
		}
	}
</script>

<style scoped>
	.el-collapse-item__header {
		background-color: #f8faff;
	}

	.bgdiv {
		background-color: white;
		height: 600px;
		width: 1000px;
		text-align: left;
		padding-left: 30px
	}

	.box-carda {
		height: 800px;
		width: 1000px
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.left {
		float: left;
	}

	.demo-form-inline {
		width: 1000px;
	}

	.title {
		font-size: 15px;
		font-weight: bold;
		text-align: left;
	}

	.text {
		color: grey;
	}

	.title-box {
		background-color: #f8faff;
		height: 60px;
		cursor: pointer;
	}

	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.info-text {
		text-align: left;
		margin-right: 60px;
	}

	/* .backbtn {
		margin-top:1px;
		margin-left:100px;
	} */

	/* .el-tabs__content {
		  width: 300px;
		  height: 400px;
	  } */
</style>
